<template>
  <my-dialog title="Child list">
    <scroll-area :bot-margin="150">
      <div class="q-pa-md">
        <q-option-group v-if="options" :options="options" type="checkbox" v-model="group"  >
          <template v-slot:label="opt">
            <div class="row items-center">
                Seq: {{ opt.value + 1 + ' '}}: <img :src="opt.image" :ref="opt.ref" :id="`my-image-${opt.value}`"/> 
            </div>
            </template>
        </q-option-group>
 
      </div>
    </scroll-area>
    <q-btn
      label="BT Print"
      class="q-ma-sm default-btn"
      @click="printImageEle"
    />
  </my-dialog>
</template>

<script setup lang="ts">
import MyDialog from 'src/components/container/MyDialog.vue';
import { getChildPartsListimages } from 'src/services/partsService';
import { PartsQR } from 'src/services/type';
import { onBeforeMount, ref, onMounted } from 'vue';
import ScrollArea from '../ScrollArea.vue';
import {
  getBluetooth,
  bluetoothPrintImageData,
  getImageData,
} from 'src/libs/blePrinter';
import { emit } from 'process';
import { useQuasar } from 'quasar';

const props = defineProps<{
  parent_part_id: number;
  qrcode_size: number;
  cews_size: number;
}>();



const group = ref([]);

const options = ref([]);

const $q = useQuasar();


async function init() {
  options.value = [];

  if (props.parent_part_id && props.qrcode_size && props.cews_size) {
    const res = await getChildPartsListimages(
      props.parent_part_id,
      props.qrcode_size,
      props.cews_size
    );
    // console.log(res.data.data);

    options.value = res.data.data.map((part: PartsQR) => {
      return {
        label: `Seq: ${part.seq + 1}, SC: ${part.SC}, SN: ${part.SN}`,
        value: part.seq,
        image: `data:image/png;base64, ${part.encoded_image}`,
        ref: `myimage_${part.seq}`,
      };
    });
  }
}
// const myimage_0 = ref<HTMLImageElement>();
// const myimage_1 = ref<HTMLImageElement>();
// const myimage_2 = ref<HTMLImageElement>();
// const myimage_3 = ref<HTMLImageElement>();
// const myimage_4 = ref<HTMLImageElement>();
// const myimage_5 = ref<HTMLImageElement>();
// const myimage_6 = ref<HTMLImageElement>();
// const myimage_7 = ref<HTMLImageElement>();
// const myimage_8 = ref<HTMLImageElement>();
// const myimage_9 = ref<HTMLImageElement>();
// const myimage_10 = ref<HTMLImageElement>();
// const myimage_11 = ref<HTMLImageElement>();
// const myimage_12 = ref<HTMLImageElement>();
// const myimage_13 = ref<HTMLImageElement>();
// const myimage_14 = ref<HTMLImageElement>();

// onBeforeMount(() => {

// console.log('onBeforeMount');

//   init();
  
// });

init()

// onMounted(() => {
//   console.log('onMounted');


// init();

// });

// async function printImageEle() {
//   console.log(group.value);
  
//   try {
//     const ble = await getBluetooth();

//     showLoading()
//     for (let qr of options.value) {
//       const selected = qr.value
//       if (group.value.includes(selected)) {
        
//         console.log('selected', selected);
//         console.log('myimage_0', myimage_0.value);
//         if (selected==0){
//             const imageData = getImageData(myimage_0.value!, 192, 104);
//             console.log(imageData);
//             await bluetoothPrintImageData(ble, imageData!);
//         }
//         if (selected==1){
//             const imageData = getImageData(myimage_1.value!, 192, 104);
//             await bluetoothPrintImageData(ble, imageData!);
//         }
//         if (selected==2){
//             const imageData = getImageData(myimage_2.value!, 192, 104);
//             await bluetoothPrintImageData(ble, imageData!);
//         }
//         if (selected==3){
//             const imageData = getImageData(myimage_3.value!, 192, 104);
//             await bluetoothPrintImageData(ble, imageData!);
//         }
//         if (selected==4){
//             const imageData = getImageData(myimage_4.value!, 192, 104);
//             await bluetoothPrintImageData(ble, imageData!);
//         }
//         if (selected==5){
//             const imageData = getImageData(myimage_5.value!, 192, 104);
//             await bluetoothPrintImageData(ble, imageData!);
//         }

//         if (selected==6){
//             const imageData = getImageData(myimage_6.value!, 192, 104);
//             await bluetoothPrintImageData(ble, imageData!);
//         }
//         if (selected==7){
//             const imageData = getImageData(myimage_7.value!, 192, 104);
//             await bluetoothPrintImageData(ble, imageData!);
//         }
//         if (selected==8){
//             const imageData = getImageData(myimage_8.value!, 192, 104);
//             await bluetoothPrintImageData(ble, imageData!);
//         }
//         if (selected==9){
//             const imageData = getImageData(myimage_9.value!, 192, 104);
//             await bluetoothPrintImageData(ble, imageData!);
//         }
//         if (selected==10){
//             const imageData = getImageData(myimage_10.value!, 192, 104);
//             await bluetoothPrintImageData(ble, imageData!);
//         }
//         if (selected==11){
//             const imageData = getImageData(myimage_11.value!, 192, 104);
//             await bluetoothPrintImageData(ble, imageData!);
//         }
//         if (selected==12){
//             const imageData = getImageData(myimage_12.value!, 192, 104);
//             await bluetoothPrintImageData(ble, imageData!);
//         }
//         if (selected==13){
//             const imageData = getImageData(myimage_13.value!, 192, 104);
//             await bluetoothPrintImageData(ble, imageData!);
//         }
//         if (selected==14){
//             const imageData = getImageData(myimage_14.value!, 192, 104);
//             await bluetoothPrintImageData(ble, imageData!);
//         }

//     }
//   }
//   $q.loading.hide()

//   } catch (error) {
//       console.log('error', error);
      
//     $q.loading.hide()
//     }
 
// }
async function printImageEle() {
  try {
    const selected:{image:string}[] = []
    const imgs:HTMLImageElement[] = []
    const loaded:boolean[] = []
    const ble = await getBluetooth()

    for (let i = 0 ;  i < group.value.length;i++){
      selected.push({...options.value[group.value[i]]})
    }
    
    for (let i = 0 ;  i < selected.length;i++){
        const data = selected[i]
        const img = document.createElement('img')
        imgs.push(img)
        img.src = data.image
        img.onload = ()=>{
          loaded.push(true)
          if (loaded.length == selected.length){
            printAll()
          }
        }
    }
    
    async function printAll(){
      showLoading()

      for(let i = 0 ; i < imgs.length; i++){
        const myimg = imgs[i]
        const imageData  = getImageData(myimg,192,104)
        if(imageData){
          await bluetoothPrintImageData(ble, imageData);
        }else{
          console.log('Fail to print image data '+i)
        }
      }
      $q.loading.hide()

    }

  } catch (error) {
    $q.loading.hide()
    console.log('error', error);
  }

}

function showLoading() {
  $q.loading.show({
    message: 'Loading. Please wait...',
    boxClass: 'bg-grey-2 text-grey-9',
    spinnerColor: 'primary',
  });
}
</script>
